<template>
  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
    :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">

    <div>
      <!-- 关键修改：组件名用 <quill-editor>，绑定 v-model:value -->
      <!-- <quill-editor 
        v-model:value="fieldModel" 
        :options="editorOption" 
        :disabled="field.options.disabled"
        @blur="handleRichEditorBlurEvent" 
        @focus="handleRichEditorFocusEvent" 
        @change="handleRichEditorChangeEvent"
        :style="!!field.options.contentHeight ? `height: ${field.options.contentHeight};` : ''"
      /> -->
    </div>

  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import i18n, { translate } from "@/utils/i18n";
import { deepClone } from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

// import { quillEditor } from 'vue3-quill'

export default {
  name: "rich-editor-widget",
  componentName: 'FieldWidget',
  mixins: [emitter, fieldMixin, i18n],
  props: {
    // props 保持不变
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false
    },
    subFormRowIndex: {
      type: Number,
      default: -1
    },
    subFormColIndex: {
      type: Number,
      default: -1
    },
    subFormRowId: {
      type: String,
      default: ''
    },
  },
  components: {
    FormItemWrapper,
    // 关键修改3：注册组件时用 quillEditor（和导入名一致）
    // quillEditor,
  },
  data() {
    return {
      oldFieldValue: null,
      fieldModel: null,
      rules: [],
      customToolbar: [],
      valueChangedFlag: false,
    }
  },
  computed: {
    editorOption() {
      return {
        placeholder: this.field.options.placeholder,
        modules: {
          // 可自定义工具栏（参考官方文档的默认配置）
          // toolbar: this.customToolbar || [['bold', 'italic', 'underline'], ['image', 'link']]
        }
      }
    },
  },
  created() {
    this.initFieldModel()
    this.registerToRefList()
    this.initEventHandler()
    this.buildFieldRules()
    this.handleOnCreated()
  },
  mounted() {
    this.handleOnMounted()
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    // 关键修改4：@change 事件的参数（0.3.1 版本返回 { quill, html, text }）
    handleRichEditorChangeEvent({ html }) {
      this.valueChangedFlag = true
      this.fieldModel = html // 同步 html 内容到 fieldModel
      this.syncUpdateFormModel(this.fieldModel)
    },
    handleRichEditorFocusEvent(quill) {
      // 事件参数为 Quill 实例
      this.oldFieldValue = deepClone(this.fieldModel)
    },
    handleRichEditorBlurEvent(quill) {
      // 事件参数为 Quill 实例
      if (this.valueChangedFlag) {
        this.emitFieldDataChange(this.fieldModel, this.oldFieldValue)
        this.valueChangedFlag = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/global.scss" as *;

.full-width-input {
  width: 100% !important;
}
</style>